<template>
    <div class="am-g table_wrap">
        <div class="am-u-sm-12">
            <form class="am-form am-scrollable-horizontal">
                <table class="am-table am-table-bordered am-table-striped am-text-nowrap am-table-centered">
                <thead>
                <tr class="am-primary">
                    <th class="table-num">序号</th>
                    <th class="table-title">广告名称</th>
                    <th class="table-id">广告编号</th>
                    <th class="table-start">投放开始时间</th>
                    <th class="table-end">投放截止时间</th>
                    <th class="table-type">广告形式</th>
                    <th class="table-terminal">投放终端</th>
                    <th class="table-money">投放预算(元)</th>
                    <th class="table-remain">投放余额(元)</th>
                    <th class="table-status1">广告状态</th>
                    <th class="table-status2">投放状态</th>
                    <th class="table-status3" v-show="slideNav==='adalready'">启用状态</th>
                    <th class="table-set"><span>操作</span></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in responseData.beans" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.adName}}</td>
                    <td>{{item.advertiserCode}}</td>
                    <td>{{item.startTime|timeFormat}}</td>
                    <td>{{item.endTime|timeFormat}}</td>
                    <td>{{item.adType|adtypeFilter}}</td>
                    <td>{{item.terminalinfo |terminalFilter}}</td>
                    <td>{{item.consumeAmount}}</td>
                    <td>{{item.advertiserBalance}}</td>
                    <td>{{item.adStatus}}</td>
                    <td>{{item.status}}</td>
                    <td v-if="slideNav==='adalready'" :id="'limitstatus'+item.id">{{item.limitStatus||item.conditionStatus||item.giftStatus}}</td>
                    <td>
                    <div class="am-btn-toolbar set_wrap" v-if="slideNav==='adalready'">
                        <div class="am-btn-group am-btn-group-xs" :id="'status'+item.id" :start="item.limitStatus||item.conditionStatus||item.giftStatus" @click="handleStatus(item.id)" >
                            <div class="play_btn am-btn am-btn-default am-btn-xs am-text-primary" v-show="item.limitStatus==='已暂停'||item.conditionStatus==='已暂停'||item.giftStatus==='已暂停'"><span class="am-icon-play-circle-o"></span> 启用</div>
                            <div class="pause_btn am-btn am-btn-default am-btn-xs" v-show="item.limitStatus==='已开启'||item.conditionStatus==='已开启'||item.giftStatus==='已开启'"><span class="am-icon-pause-circle-o"></span> 暂停</div>
                            <div @click.stop="handleDelete(item.id)" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</div>
                            <div @click.stop="handleEdit(item.id,item.adId,true)" class="am-btn am-btn-default am-btn-xs am-text-warning"><span class="am-icon-pencil-square-o"></span> 编辑</div>
                            <div @click.stop="handleEdit(item.id,item.adId,false)" class="am-btn am-btn-default am-btn-xs am-text-primary"><span class="am-icon-archive"></span> 查看</div>
                            <!-- <div @click="handleView(item.adName,item.adType,item.adHomepage,item.mobileVersionUrl)" class="am-btn am-btn-default am-btn-xs am-text-warning" type="button" data-am-modal="{target: '#preview-popup'}"><span class="am-icon-th"></span> 预览</div> -->
                            <div @click.stop="handleView(item.adName,item.adType,item.adHomepage,item.mobileVersionUrl)" class="am-btn am-btn-default am-btn-xs am-text-warning" type="button"><span class="am-icon-th"></span> 预览</div>
                        </div>
                    </div>
                    <div v-if="slideNav==='adupload'">
                        <div @click="handleEdit(item.id,item.adId,true)" class="am-btn am-btn-primary am-btn-sm borderRadius4">选中</div>
                    </div>
                    </td>
                </tr>
                </tbody>
                </table>
                <!-- <div class="am-cf"> 共 15 条记录
                    <div class="am-fr">
                        <ul class="am-pagination">
                        <li class="am-disabled"><a href="#">«</a></li>
                        <li class="am-active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">»</a></li>
                        </ul>
                    </div>
                </div> -->
                <hr />
                <p>注：时间过期，投放截止日期标红；投放余额为0，会标红。</p>
                <br/>
            </form>
            <div class="am-popup" id="preview-popup">
                <div class="am-popup-inner">
                    <div class="am-popup-hd">
                        <h4 class="am-popup-title" v-html="viewName">广告名称</h4>
                        <span data-am-modal-close class="am-close">&times;</span>
                    </div>
                    <div class="preview_wrap" v-if="viewType==='picture'">
                        <div>
                            <button class="am-btn am-btn-primary">广告默认封面</button>
                        </div>
                        <div class="big_picture"><img :src="viewBigPic" alt=""></div>
                        <div>
                            <button class="am-btn am-btn-primary">广告轮播图</button>
                        </div>

                        <div class="preview_banner">
                            <div class="content">
                                <div class="Box_con clearfix">
                                    <span class="btnl btn" id="btnl"></span>
                                    <span class="btnr btn" id="btnr"></span>
                                    <div class="conbox" id="BoxUl">
                                        <ul :style="{'width':viewUrl.length*274+'px'}">
                                          <li class="cur" v-for="(item,index) in viewUrl" :key="'pic'+index">
                                            <img :src="responseData.showImgPre+item" alt=""/>
                                          </li>
                                        </ul>
                                    </div>
                                    <p class="BoxSwitch" id="BoxSwitch">
                                        <span class="cur"></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="preview_wrap" v-else-if="viewType==='video'">
                        <iframe width="100%" height="600px" :src='viewUrl' frameborder='0' allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'
import {url} from '../../static/config'
import '../assets/css/table.css'
import '../../static/css/banner.css'
import {LbMove} from '../../static/js/banner.js'

export default {
  data () {
    return {
      slideNav: this.$route.params.pathMatch || 'adalready',
      kind: this.$route.query.kind || '0',
      responseData: [],
      viewName: '',
      viewBigPic: '',
      viewUrl: '',
      viewType: ''
    }
  },
  created () {
    var slideNav = this.slideNav
    var kind = this.kind
    var _this = this
    // console.log('table初始化', slideNav, kind)
    if (slideNav === 'adalready' && kind === '0') {
      // 基础已投放列表页面
      axios.post(url + '/web-adv/adPlaceLimitList')
        .then(function (res) {
          // console.log('列表', res.data)
          _this.responseData = res.data
        })
    } else if (slideNav === 'adupload' && kind === '0') {
      // 查询未添加投放限制的列表
      axios.post(url + '/web-adv/adPlaceUnLimitList')
        .then(function (res) {
          // console.log('列表', res.data)
          _this.responseData = res.data
        })
    } else if (slideNav === 'adalready' && kind === '1') {
      // 已投放列表页面
      axios.post(url + '/web-adv/adPlaceConditionList')
        .then(function (res) {
          // console.log('列表', res.data)
          _this.responseData = res.data
        })
    } else if (slideNav === 'adupload' && kind === '1') {
      // 投放页面（即查询未设置匹配条件广告列表）接口
      axios.post(url + '/web-adv/adPlaceUnConditionList')
        .then(function (res) {
          // console.log('列表', res.data)
          _this.responseData = res.data
        })
    } else if (slideNav === 'adalready' && kind === '2') {
      // 红包已投放列表页面
      axios.post(url + '/web-adv/adPlaceGiftList')
        .then(function (res) {
          // console.log('列表', res.data)
          _this.responseData = res.data
        })
    } else if (slideNav === 'adupload' && kind === '2') {
      // 投放红包页面（即查询未配置红包的广告列表）接口
      axios.post(url + '/web-adv/adPlaceUnGiftList')
        .then(function (res) {
          // console.log('列表', res.data)
          _this.responseData = res.data
        })
    }
  },
  watch: {
    '$route' (val, old) {
      var _this = this
      var kind = val.query.kind
      var slideNav = val.params.pathMatch
      this.kind = kind
      this.slideNav = slideNav
      // console.log('Table.vue中watch：', slideNav, kind)

      if (slideNav === 'adalready' && kind === '0') { // 基础已投放列表页面
        _this.jointWay('post', '/web-adv/adPlaceLimitList')
      } else if (slideNav === 'adupload' && kind === '0') { // 查询未添加投放限制的列表
        _this.jointWay('post', '/web-adv/adPlaceUnLimitList')
      } else if (slideNav === 'adalready' && kind === '1') { // 已投放列表页面
        _this.jointWay('post', '/web-adv/adPlaceConditionList')
      } else if (slideNav === 'adupload' && kind === '1') { // 投放页面（即查询未设置匹配条件广告列表）接口
        _this.jointWay('post', '/web-adv/adPlaceUnConditionList')
      } else if (slideNav === 'adalready' && kind === '2') { // 红包已投放列表页面
        _this.jointWay('post', '/web-adv/adPlaceGiftList')
      } else if (slideNav === 'adupload' && kind === '2') { // 投放红包页面（即查询未配置红包的广告列表）接口
        _this.jointWay('post', '/web-adv/adPlaceUnGiftList')
      }
    }
  },
  methods: {
    jointWay (way, listUrl) {
      var _this = this
      if (way === 'post') {
        axios.post(url + listUrl)
          .then(function (res) {
            // console.log('jointWay列表', res.data)
            _this.responseData = res.data
            if (res.data.error && res.data.error.code === 'NOT_LOGIN') {
              window.location.href = '/'
            }
          })
      } else if (way === 'delete') {
        axios.delete(url + listUrl)
          .then(function (res) {
            // console.log('删除', _this.kind, res.data)
            if (_this.kind === '0') {
              _this.jointWay('post', '/web-adv/adPlaceLimitList')
            } else if (_this.kind === '1') {
              _this.jointWay('post', '/web-adv/adPlaceConditionList')
            } else if (_this.kind === '2') {
              _this.jointWay('post', '/web-adv/adPlaceGiftList')
            }
          })
      }
    },
    handleEdit (id, adId, editable) {
      // console.log('编辑')
      var kind = this.$route.query.kind
      var upload = this.$route.params.pathMatch
      if (kind === '0') {
        this.$router.push({path: '/basics', query: {upload: upload, id: id, adId: adId, editable: editable}})
      } else if (kind === '1') {
        this.$router.push({path: '/bigdate', query: {upload: upload, id: id, adId: adId, editable: editable}})
      } else {
        this.$router.push({path: '/random', query: {upload: upload, id: id, adId: adId, editable: editable}})
      }
    },
    handleView (name, type, adHomepage, mobileVersionUrl) {
      console.log('预览', name, type, adHomepage, mobileVersionUrl)
      var _this = this
      _this.viewName = name
      _this.viewType = type

      if (type === 'picture') {
        _this.viewBigPic = _this.responseData.showImgPre + adHomepage
        // console.log('小图', mobileVersionUrl)
        var bannerPic = mobileVersionUrl.split('|')
        _this.viewUrl = bannerPic.splice(1)
      } else if (type === 'video') {
        _this.viewUrl = _this.responseData.showVideoPre + mobileVersionUrl
      }
      $('#preview-popup').modal()
    },
    handleStatus (id) {
      // 开启状态
      var status = $('#status' + id).attr('start')
      var changeStatusUrl = ''
      if (this.kind === '0') {
        changeStatusUrl = '/web-adv/setAdPlaceLimit'
      } else if (this.kind === '1') {
        changeStatusUrl = '/web-adv/setAdPlaceCondition'
      } else if (this.kind === '2') {
        changeStatusUrl = '/web-adv/setAdPlaceGift'
      }

      if (status === '已开启') {
        axios.post(url + changeStatusUrl + '?id=' + id + '&status=2')
          .then(function (res) {
            $('#status' + id).find('.play_btn').css('display', 'block')
            $('#status' + id).find('.pause_btn').css('display', 'none')
            $('#status' + id).attr('start', '已暂停')
            $('#limitstatus' + id).html('已暂停')
          })
      } else {
        axios.post(url + changeStatusUrl + '?id=' + id + '&status=1')
          .then(function (res) {
            $('#status' + id).find('.play_btn').css('display', 'none')
            $('#status' + id).find('.pause_btn').css('display', 'block')
            $('#status' + id).attr('start', '已开启')
            $('#limitstatus' + id).html('已开启')
          })
      }
    },
    handleDelete (item) {
      // console.log('id为', item, this.slideNav, this.kind)
      if (this.kind === '0') {
        this.jointWay('delete', '/web-adv/setAdPlaceLimit?id=' + item)
      } else if (this.kind === '1') {
        this.jointWay('delete', '/web-adv/setAdPlaceCondition?id=' + item)
      } else if (this.kind === '2') {
        this.jointWay('delete', '/web-adv/setAdPlaceGift?id=' + item)
      }
    }
  },
  filters: {
    timeFormat: function (value) {
      return value.split(' ')[0]
    },
    adtypeFilter: function (value) {
      if (value === 'picture') {
        return '图片'
      } else if (value === 'video') {
        return '视频'
      } else {
        return value
      }
    },
    terminalFilter: function (value) {
      if (value === 'pc') {
        return '电脑'
      } else if (value === 'mobile') {
        return '手机'
      } else {
        return value
      }
    }
  },
  mounted () {
    var _this = this
    // 滚动元素id，左切换按钮，右切换按钮，切换元素个数id,滚动方式，切换方向，是否自动滚动，滚动距离，滚动时间，滚动间隔，显示个数
    LbMove('BoxUl', 'btnl', 'btnr', 'BoxSwitch', true, 'left', true, 274, 1000, 5000, 3)
    $('.am-close').on('click', function () {
      _this.viewUrl = ''
    })
    // 解决bug:关闭预览弹框，视频停止播放
    $('body').on('click', function (e) {
      if (e.target.className === 'am-dimmer am-active') {
        _this.viewUrl = ''
      }
    })
  }
}
</script>
